<template>
    <div class="rich-text-editor">
      <div class="title-container">
        <span>{{ messages[currentLanguage].title }}:</span>
        <input
          type="text"
          v-model="article.title"
          :placeholder="messages[currentLanguage].title"
          class="article-title"
        />
      </div>
      <p class="last-modified">{{ messages[currentLanguage].lastModified }} {{ formatDate(article.updatedAt) }}</p>
      <!-- <select v-model="articleLanguage" @change="fetchArticle">
        <option value="zh">中文</option>
        <option value="en">英文</option>
      </select> -->
      <quill-editor
        v-model="content"
        :options="editorOptions"
        @blur="onBlur"
      />
      <button @click="saveArticle">{{ messages[currentLanguage].saveButton }}</button>
    
    </div>
  </template>
  
  <script>
  import { quillEditor } from 'vue-quill-editor';
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import axios from 'axios';
  import { messages } from '@/languages/richEditorText.js'; // 导入语言文件
  
  export default {
    name: 'RichTextEditor',
    components: {
      quillEditor,
    },
    props: {
      articleId: {
        type: String,
        required: true,
      },
      currentLanguage: {
        type: String,
        default: 'zh', // 默认语言
      },
    },
    data() {
      return {
        articleLanguage: 'zh', // 文章语言
        article: { title: '', updatedAt: '' }, // 存储文章的详细信息
        content: '',
        editorOptions: {
          placeholder: messages[this.currentLanguage].placeholder,
        },
        messages: messages, // 将语言数据赋值给 messages
      };
    },
    methods: {
      async fetchArticle() {
        const articleId = this.$route.params.articleId; 
        const language = this.$route.params.language;
        if(language==='ZH-CN'){
            this.articleLanguage='zh'
        }
        if(language==='EN-US'){
            this.articleLanguage='en'
        }
        try {
          const response = await axios.post('/api/system/doc/article/details', {
            articleId: articleId,
            language: this.articleLanguage,
          });
  
          if (response.data.code === 200) {
            this.article = response.data.data; // 更新文章对象
            this.content = this.article.content; // 将HTML内容赋给编辑器
          } else {
            console.error(this.messages[this.currentLanguage].fetchError, response.data.message);
          }
        } catch (error) {
          console.error('请求错误:', error);
        }
      },
      onBlur() {
        // 处理失去焦点事件
      },
      async saveArticle() {
        const articleId = this.$route.params.articleId; 
        this.$emit('save', this.content); // 触发保存事件，传递当前内容给父组件
        try {
          const response = await axios.post('/api/system/editDoc/save', {
            articleId: articleId,
            content: this.content,
            title: this.article.title, // 保存标题
            language: this.articleLanguage,
          });
  
          if (response.data.code === 200) {
            console.log(this.messages[this.currentLanguage].saveSuccess, response.data.message);
          } else {
            console.error(this.messages[this.currentLanguage].fetchError, response.data.message);
          }
        } catch (error) {
          console.error('请求错误:', error);
        }
      },
      formatDate(dateString) {
        const options = {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        };
        const date = new Date(dateString);
        return date.toLocaleString(this.currentLanguage === 'zh' ? 'zh-CN' : 'en-US', options).replace(/\//g, '-');
      }
    },
    mounted() {
      
      if(this.$route.query.language==='ZH-CN'){
        this.articleLanguage='zh'
      }
      if(this.$route.query.language==='EN-US'){
        this.articleLanguage='en'
        }
        this.fetchArticle(); // 组件挂载时获取文章数据
    },
  };
  </script>
  
  <style scoped>
  .rich-text-editor {
    margin: 90px 0;
  }
  
  .title-container {
    display: flex;
    align-items: center;
    width: 100%; /* 确保宽度与下方内容一致 */
    margin-bottom: 10px; /* 与其他元素的间距 */
  }
  
  .article-title {
    width: 90%;
    margin-left: 10px; /* 为标题和输入框之间添加空隙 */
    font-size: 24px;
  }
  
  .last-modified {
    color: #888;
    font-size: 14px;
  }
  
  .rich-text-editor button {
    margin-top: 20px;
  }
  </style>
  